<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue3</title>
</head>

<body>
  <div id="app">
    <p>时和分钟的转换</p>
      <p>时：<input type="text" v-model="time"></p>
      <p>分钟：<input type="text" v-model="minute"></p>
      <hr>
    <p>元和角的转换</p>
      <p>元：<input type="text" v-model="yuan"></p>
      <p>角：<input type="text" v-model="jiao"></p>

  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
   Vue.createApp({
     data(){
       return{
          time:0,
          minute:0,
          yuan:0,
          jiao:0
       }
     },
     methods:{
        method1:function(val,oldVal){
          this.jiao=val*10;
        },
        method2:function(val,oldVal){
          this.yuan=val/10;
        }
      },
     watch:{
        time(val){
          this.minute = val*60
        },
      //监听器函数 也可以接受两个参数，val是当前值，oldval旧值
        minute(val, oldval){
           this.time = val/60
        },
        //监听元属性,yuan变化时，jiao属性变成yuan*10
          yuan:"method1",
          jiao:"method2"
      }
     }).mount('#app')
  </script>
</body>

</html>
